<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/char/css/reset.css">
    <link rel="stylesheet" href="/static/char/css/style.css">
    <link rel="stylesheet" href="/static/layui/src/css/layui.css">
    <link rel="stylesheet" href="/static/emoji/lib/css/jquery.mCustomScrollbar.min.css"/>
    <link rel="stylesheet" href="/static/emoji/src/css/jquery.emoji.css"/>
    <link rel="stylesheet" href="/static/char/css/diglog.css">
    <link rel="stylesheet" href="/static/char/css/slide.css">
    <script src="/static/char/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/layui/dist/layui.js"></script>
    <script src="/static/emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
    <script src="/static/emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
    <script src="/static/emoji/src/js/jquery.emoji.js"></script>

    <style>
        .my_content {
            height: 120px;
            outline: none;
            padding: 0 .2rem;
            white-space: pre-line;
            overflow-x:auto;
            // background: red;
        }
        .my_msg {
            position: relative;
        }
        .my_icon {
            top:30px;
            position: absolute;
        }
        .message-time-tip {
            padding: 0;
            text-indent: 4rem;
            text-align: left !important;
        }
        .chat-msg-dialog {
           margin-left: 4rem;
        }
        .msg_right {
            text-align: right !important;
        }
        .msg_right .chat-msg-dialog {
            margin: 0;
            margin-right: 4rem;
        }
        .msg_right .my_icon {
            right: 0;
        }
        .msg_right .message-time-tip {
            padding-right: 4rem;
            text-align: right !important;
        }
        #emoji_container_1 {
             z-index: 9999 !important;
        }
        #my_content{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="webim-wrap">
        <div class="webim-box-header">
            <div class="header-user-name">
                        <span class="user-name">
                            <img id="myhead" src="{$Think.session.user.head}">
                            <span>{$Think.session.user.name}</span>
                        </span>
                <span class="shop-name shop-name-span">
                            <span>
                                <a href="javascript:;"  id="chatname" class="shop-name">{$conversationone.name}</a>
                                <i class="el-icon-edit-outline"></i>
                            </span>
                            <span class="terminal">[在线]</span>
                        </span>
            </div>
        </div>
        <div class="webim-box">
            <div class="webim-people-list">
                <div class="list-tool">
                    <div class="tool-search">
                                <span class="search-wrap">
                                    <i class="search-icon"></i>
                                    <span overflow="scroll" listitem="">
                                        <div role="tooltip" id="el-popover-1380" aria-hidden="true" class="el-popover el-popper search-list-proper" tabindex="0" style="width: 230px; display: none;">
                                            <!---->
                                            <!---->
                                            <div class="search-no-value">
                                                <i class="no-data"></i>
                                                <span>暂无结果</span>
                                            </div>
                                        </div>
                                        <div class="el-input el-input--suffix el-popover__reference" aria-describedby="el-popover-1380" tabindex="0">
                                            <!---->
                                            <input type="text" autocomplete="off" placeholder="搜索：用户名/备注/群名" onfocus="this.placeholder=''" onblur="this.placeholder='搜索：用户名/备注/群名'" class="el-input__inner">
                                            <!---->
                                            <!---->
                                            <!---->
                                            <!---->
                                        </div>

                                    </span>
                                </span>

                    </div>
                    <div class="add-group-wrap">
                        <span class="add-new-group"></span>
                        <div class="el-dialog__wrapper" style="display: none; margin-top: 20vh;">
                            <div role="dialog" aria-modal="true" aria-label="添加群" class="el-dialog add-group-dialog" style="margin-top: 15vh; width: 30%;">
                                <div class="el-dialog__header">
                                    <span class="el-dialog__title">添加群</span>
                                    <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                                        <i class="el-dialog__close el-icon el-icon-close"></i>
                                    </button>
                                </div>
                                <!---->
                                <div class="el-dialog__body"><div class="add-content-wrap"><label>群号</label> <input type="text" name="group" class="add-group-input"> <p class="search-group-value" style="display: none;"><i class="group-head-img"></i> <span class="group-name"></span></p> <!----> <span slot="footer" class="dialog-footer dialog-tool-btn"><button type="button" class="el-button el-button--primary el-button--small"><!----><!----><span>下一步</span></button> <button type="button" class="el-button el-button--primary el-button--small" style="display: none;"><!----><!----><span>加入该群</span></button></span></div> <div style="display: none;"><div class="group-validate-wrap"><i class="el-icon-circle-check-outline" style="display: none;"></i> <i class="el-icon-warning" style="display: none;"></i> <span></span></div></div></div>
                                <!---->
                            </div>
                        </div>
                    </div>

                    <div class="tool-tab">
                        <ul>
                            <li>
                                <span class="today-chat
                           tab-active

                             ">
                                    <ins class="hide"></ins>
                                </span>
                            </li>

                            <?php if(getrole() !== EMPLOYER) {?>
                            <li>
                                <span class="all-chat "></span>
                            </li>
                            <?php }?>
                            <?php if(getrole() !== EMPLOYER) {?>
                            <li>
                                <span class="all-group"></span>
                            </li>
                            <?php }?>
                        </ul>
                    </div>
                </div>
                <div class="list-tab-content">

                    <div class="im-scroll" style="">
                        <ul id="conversation">
                            <!-- 消息列表 -->
                            {foreach $conversation as $key=>$vo }
                            <li id="conversation{$vo.codeId}" class="people-chat-list
                            <?php if($key == 0) {?>
                             active
                             <?php }?>
                            "
                                data-codeid = {$vo.codeId} data-type = '{$vo.type}' data-name = '{$vo.name}' data-head = '{$vo.head}'
                            >
                                <div>
                                    <span class="head-img-wrap">
                                        <img src="{$vo.head}" class="people-online-img">
                                        <i id="newmsg"></i>
                                    </span>
                                    <div class="chat-info-wrap">
                                        <div class="chat-user">
                                                <span class="user-right-icon">
                                                <!---->
                                                    <!---->
                                                    <!---->
                                                </span>
                                            <span class="chat-user-name">{$vo.name}</span>
                                            <span class="chat-msg-time">{$vo.msg_time}</span>
                                        </div>
                                        <div class="chat-msg-info">
                                            <span class="chat-last-msg liitem">{$vo.end_msg}</span>
                                            <div class="el-badge unread-item">
                                                <sup class="el-badge__content el-badge__content--undefined" style="display: none;"></sup>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!---->
                            </li>
                            {/foreach}
                        </ul>
                    </div>
                    <?php if(getrole() !== EMPLOYER) {?>

                    <div style="display: none;">
                        {foreach $Goodfriendlist as $key=>$vo }
                        <ul>
                            <li >
                                <span class="friend-list-title">
                                    <i class="el-icon-caret-right"></i>
                                    <i class="el-icon-caret-right"></i>
                                    <span style="margin-left: 40px;">{$vo.name}</span>
                                </span>
                                <!-- 好友列表 -->
                                <div class="im-scroll" style="display: none;">
                                    {foreach $vo.data as $key1=>$vo1 }
                                    <ul >
                                        <li id="conversation{$vo1.id}" class="people-chat-list"
                                            data-codeid = {$vo1.id} data-type = 'friend' data-name = '{$vo1.name}' data-head = '{$vo1.head}'
                                        ><div>
                                            <span class="head-img-wrap">
                                            <img src="{$vo1.head}" class="people-outline-img"> <i class="outline">
                                        </i>
                                        </span>
                                            <div class="chat-info-wrap"><div class="chat-user"><span class="user-right-icon"><!----><!----><!----></span>
                                                <span class="chat-user-name">{$vo1.name}</span> <span class="chat-msg-time">2017-9</span></div> <div class="chat-msg-info">
                                                <span  class="chat-last-msg liitem">还在吗</span> <div class="el-badge unread-item"><sup class="el-badge__content el-badge__content--undefined" style="display: none;">

                                            </sup></div></div></div></div> <!----> <div class="vue-contextmenu-listWrapper vue-contextmenuName-rencent-list-menu"><div class="context-menu-list">
                                            <span><i class="fa fa-home fa-fw"></i> <!----> <span class="menu-name"><span class="el-icon-arrow-right"></span> <span>保存</span></span></span>
                                            <span class="child-menu-list"><span class="child-menu"><span class="menu-item">我的好友</span></span><span class="child-menu"><span class="menu-item">555</span></span><span class="child-menu"><span class="menu-item">55</span></span><span class="child-menu"><span class="menu-item">333</span></span></span></div><div class="context-menu-list"><span><i class="fa fa-home fa-fw"></i> <!----> <span class="menu-name"><!----> <span>连接</span></span></span> <!----></div> <div class="el-dialog__wrapper" style="display: none;"><div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog el-dialog--center add-group-dialog contextmenu-dialog" style="margin-top: 30vh; width: 30%;"><div class="el-dialog__header"><span class="el-dialog__title"></span><!----></div><!----><div class="el-dialog__footer"><span class="dialog-footer"><button type="button" class="el-button el-button--default el-button--mini"><!----><!----><span>取 消</span></button> <button type="button" class="el-button el-button--primary el-button--mini"><!----><!----><span>确 定</span></button></span></div></div></div></div></li>
                                    </ul>
                                    {/foreach}
                                </div>
                            </li>
                        </ul>
                        {/foreach}
                    </div>
                    <?php }?>
                    <div style="display: none;">
                                <span class="group-list-title">
                                    <i class="el-icon-caret-right"></i>
                                    <span>我加入的群</span>
                                </span>
                        <div class="im-scroll" style="display: none;">


                            <ul></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="webim-contact-info" style="">
                <!---->
                <div>
                    <!---->
                    <div class="shop-pannel-tabs">
                        <div class="el-tabs el-tabs--top">

                            <div class="el-tabs__content">
                                <div role="tabpanel" id="pane-first" aria-labelledby="tab-first" class="el-tab-pane"></div>
                                <div role="tabpanel" aria-hidden="true" id="pane-second" aria-labelledby="tab-second" class="el-tab-pane" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="userinfo-pannel-wrap">
                            <div class="slide1 geren">
                                <div class="compannymsg">
                                    <Div class="companytx">
                                        <img src="/static/char/img/touxiang.png">
                                    </Div>
                                    <div class="companyL">
                                        <p>
                                            <span class="companname">重庆焦点网路</span><span class="shuxing">企业</span>
                                        </p>
                                        <p>
                                            <Span class="zhixing">全职</Span>
                                            <span class="dengji1">
                        <img src="/static/char/img/dengji.png">
                    </span>
                                            <span class="dengji2">
                        <img src="/static/char/img/huangguan.png">
                        247
                    </span>
                                        </p>
                                    </div>
                                </div>
                                <div class="line">

                                </div>
                                <div class="shachang">
                                    小程序开发 / 微信开发 / 前端开发 /  二次开发
                                </div>
                                <div class="line">

                                </div>
                                <div class="nengli">
                                    等级：<span class="huiyuandengji"><img src="/static/char/img/zuan.png">T1开发者</span>
                                </div>
                                <div class="line">

                                </div>
                                <Div class="pinjia">
                                    <div class="pingjiaxinxi">
                                        <p class="fabunum">16</p>
                                        <p>发布总数</p>
                                    </div>
                                    <div class="pingjiaxinxi">
                                        <p class="fabunum"><img src="/static/char/img/star.png"><img src="/static/char/img/star.png"><img src="/static/char/img/star.png"><img src="/static/char/img/star.png"><img src="/static/char/img/star.png"></p>
                                        <p>综合评价</p>
                                    </div>
                                </Div>
                                <div class="line">

                                </div>
                                <div class="order">
                                    <div class="ordermsg">
                                        <div class="corder1">
                                            <img src="/static/char/img/icon/TM21.png">
                                        </div>
                                        <div class="cordername">
                                            订单名称名称名称名称
                                        </div>
                                        <div class="orderastate">
                                            进行中
                                        </div>

                                    </div>
                                    <div class="orderprice">
                                        <p class="orderhao">
                                            订单号：<Span>156666</Span>
                                        </p>
                                        <p class="ordermoney">
                                            ￥：5000
                                        </p>
                                    </div>
                                    <a class="allorder">查看全部订单</a>
                                </div>
                                <div class="quke">
                                    <a href="">
                                        <img src="/static/char/img/icon/TM23.png">
                                        <p>快速下单</p>
                                    </a>
                                    <a href="">
                                        <img src="/static/char/img/icon/TM24.png">
                                        <p>联系我们</p>
                                    </a>
                                    <a href="">
                                        <img src="/static/char/img/icon/TM25.png">
                                        <p>帮助中心</p>
                                    </a>
                                </div>
                            </div>

                        </div>
                        <!---->
                    </div>
                    <!---->
                </div>
                <!---->
            </div>
            <div class="webim-chat-panel">
                <Div class="caozuo">
<!--                    <a class="moreshipin"><img src="img/icon/TM35.png"></a>-->
<!--                    <a class="shoushipin"><img src="img/icon/TM36.png"></a>-->
                </Div>
                <Div class="shipin">
                    <a><img src="/static/char/img/icon/TM29.png"></a>
                    <a><img src="/static/char/img/icon/TM30.png"></a>
                    <a><img src="/static/char/img/icon/TM31.png"></a>
                    <a><img src="/static/char/img/icon/TM32.png"></a>
                    <a><img src="/static/char/img/icon/TM33.png"></a>
                    <a><img src="/static/char/img/icon/TM34.png"></a>

                </Div>
                <div style="display: block">
                    <div class="chat-panel-header" style="display: none">
                                <span>
                                    <i class="chat-panel-ysxiaohao"></i>
                                    <span class="user-fixed-phone"></span>
                                    <span>
                                        <div role="tooltip" id="el-popover-6787" aria-hidden="true" class="el-popover el-popper add-firend-popover" style="width: 230px; display: block;">
                                            <!---->
                                            <div class="add-popover-content">
                                                <span class="popover-header">添加对方为好友</span>
                                                <span class="popover-content">
                                                    <span class="remark-name">
                                                        <label>备注</label>
                                                        <input type="text" name="remark" class="remark-name-area">
                                                    </span>
                                                    <span class="move-group">
                                                        <label>分组</label>
                                                        <span>
                                                            <div role="tooltip" id="el-popover-332" aria-hidden="true" class="el-popover el-popper choose-group-popover" tabindex="0" style="width: 138px; display: none;">
                                                                <!---->
                                                                <ul class="choose-group-wrap">
                                                                    <li class="choose-group-item active">
                                                                        我的好友
                                <i class="el-icon-check"></i>
                                                                    </li>
                                                                    <li class="choose-group-item">555


                                                                        <!---->
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <input type="text" name="move" readonly="readonly" class="move-group-area el-popover__reference" aria-describedby="el-popover-332" tabindex="0">
                                                        </span>
                                                    </span>
                                                    <div class="btn-group">
                                                        <button type="button" class="el-button el-button--default el-button--mini">
                                                            <!---->
                                                            <!---->
                                                            <span>取消</span>
                                                        </button>
                                                        <button type="button" class="el-button el-button--primary el-button--mini">
                                                            <!---->
                                                            <!---->
                                                            <span>确定</span>
                                                        </button>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                        <i class="chat-add-friend"></i>
                                    </span>
                                </span>
                        <!---->
                    </div>
                    <div class="view-more">
                        <a class="click-load-more" style="cursor: pointer" >加载更多</a>
                    </div>
                    <div id="chat-content-wrap"  class="chat-content-wrap" style="width: 98%;padding: 15px 0;padding-left: 10px;">

                    </div>

                    <div class="chat-input-wrap">
                        <div class="chat-tool-wrap">
                            <div class="chat-tool-left">
                                        <span>
                                            <div role="tooltip" id="el-popover-2986" aria-hidden="true" class="el-popover el-popper" tabindex="0" style="width: 310px; display: none;">
                                                <!---->
                                                <div class="emoji-wrap">
                                                    <ul></ul>
                                                </div>
                                            </div>
                                            <i class="webim-emoji el-popover__reference" id="emoji" aria-describedby="el-popover-2986" tabindex="0"></i>
                                        </span>
                                <span>
                                            <i class="upload-file el-popover__reference" aria-describedby="el-popover-2554" tabindex="0"></i>
                                        </span>
                                <span>
                                            <i class="set-screenshot el-popover__reference" aria-describedby="el-popover-5406" tabindex="0"></i>
                                        </span>
                                <span>
                                            <div role="tooltip" id="el-popover-2078" aria-hidden="true" class="el-popover el-popper evaluation-tip" tabindex="0" style="display: none;">
                                                <!---->
                                                <span>结束咨询,评价TA</span>
                                            </div>
                                            <i class="set-evaluation el-popover__reference" aria-describedby="el-popover-2078" tabindex="0"></i>
                                        </span>
                            </div>
                            <div class="chat-tool-right">
                                <i class="history-message"></i>
                            </div>
                        </div>

                        <div class="my_content" id="my_content" contenteditable="true"></div>
                        <div class="chat-input-button">
                            <span class="chat-tip">为了您的资金安全，请勿线下交易！</span>
                            <span class="chat-tip">可按下Ctrl+Enter发送！</span>
                            <button type="button" class=" el-button submit-message el-button--primiry el-button--mini my_send"
                            style="padding: .2rem 1rem"
                            >
                                <!---->
                                <!---->
                                <span>发送</span>
                            </button>

                            <button type="button" class=" el-button submit-message el-button--primiry el-button--mini"
                                    style="padding: .2rem 1rem;margin-right: .2rem"
                            >
                                <!---->
                                <!---->
                                <span>关闭</span>
                            </button>

                            <div class="el-dialog__wrapper" style="display: none;">
                                <div role="dialog" aria-modal="true" aria-label="确认发送图片" class="el-dialog" style="margin-top: 15vh;">
                                    <div class="el-dialog__header">
                                        <span class="el-dialog__title">确认发送图片</span>
                                        <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                                            <i class="el-dialog__close el-icon el-icon-close"></i>
                                        </button>
                                    </div>
                                    <!---->
                                    <!---->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!---->
            </div>
        </div>
        <div class="notice">
            <audio id="webim-sound" src="https://cms.zbjimg.com/webim/income.mp3" class="hide"></audio>
        </div>
        <div class="el-dialog__wrapper error-tip-dialog" style="display: none;">
            <div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog" style="margin-top: 30vh; width: 30%;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title"></span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                        <i class="el-dialog__close el-icon el-icon-close"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="falseMsgList" style="overflow: hidden;width: 0;height: 0;max-width: 0;min-height: 0;position: fixed;"></div>
<script type="text/javascript" src="/static/js/chat.js"></script>

<script>

    layui.use(['layer', 'jquery'], function () {
        var layer = layui.layer;
    });
    var sedMsgURL = "{:url('chat/index/sedMsg')}"; // 发送聊天
    var getMsgURL = "{:url('chat/index/getMsgList')}"; // 获取聊天内容
    var socket  = new WebSocket('ws://127.0.0.1:7272');
    var uid = "{$Think.session.user.id}";

    $(function () {
        $("#my_content").emoji({
            button: "#emoji",
            showTab: false,
            animation: 'fade',
            icons: [{
                name: "QQ表情",
                path: "/static/emoji/dist/img/qq/",
                maxNum: 91,
                excludeNums: [41, 45, 54],
                file: ".gif"
            }]
        });

        wrapScroll();
        $('.tool-tab ul li').click(function () {
            $(this).children('span').addClass('tab-active');
            $(this).siblings().children('span').removeClass('tab-active');
            $(".list-tab-content>div").eq($(this).index()).show().siblings().hide()
        });

        $('.new-friend-group').click(function () {
            $(this).siblings().show()
        });
        $('.friend-list-title').click(function () {
            $(this).siblings('.im-scroll').toggle()
        });

        $(`#my_content`).click(function() {
            return false
        });

    });
    $(window).click(function() {
        $(`#my_content`).blur()
    });

</script>

</body>
</html>
